﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首页界面</title>
    <link rel="stylesheet" href="css/base.css">
    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/base.js"></script>
    <script src="js/index.js"></script>
    <script src="./js/guangdong.js"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
</head>

<body>

    <!--顶部-->
    <header class="header left">
        <div class="left nav">
            <ul>
                <li class="nav_active"><i class="nav_1"></i><a href="index.html">全省概览</a> </li>
                <li><i class="nav_2"></i><a href="carContrl.html">各市统计</a> </li>
                <li><i class="nav_3"></i><a href="map.html">地图界面</a> </li>
            </ul>
        </div>
        <div class="header_center left">
            <h2><strong>城市数据可视化平台</strong></h2>
            <p class="color_font"><small>Urban data visualization platform</small></p>
        </div>
        <div class="right nav text_right">
            <div id="time" style="font-size: 3vh;margin: 5% 6% 0 0; color:#eeecece0; float: right;"></div>
        </div>
    </header>


    <!--内容部分-->
    <div class="con left">

        <div class="con_div">
            <div class="con_div_text left">
                <div class="con_div_text01 left">
                    <img src="img/info_1.png" class="left text01_img">
                    <div class="left text01_div">
                        <p></p>
                        <p></p>
                    </div>
                </div>
                <div class="con_div_text01 right">
                    <img src="img/info_2.png" class="left text01_img">
                    <div class="left text01_div">
                        <p></p>
                        <p></p>
                    </div>
                </div>
            </div>

            <div class="con_div_text left">
                <div class="con_div_text01 left">
                    <img src="img/info_4.png" class="left text01_img">
                    <div class="left text01_div">
                        <p></p>
                        <p class="sky"></p>
                    </div>
                </div>
                <div class="con_div_text01 right">
                    <img src="img/info_5.png" class="left text01_img">
                    <div class="left text01_div">
                        <p></p>
                        <p class="sky"></p>
                    </div>
                </div>
            </div>

            <div class="con_div_text left">
                <div class="con_div_text01 left">
                    <img src="img/info_6.png" class="left text01_img">
                    <div class="left text01_div">
                        <p></p>
                        <p class="org"></p>
                    </div>
                </div>
                <div class="con_div_text01 right">
                    <img src="img/info_7.png" class="left text01_img">
                    <div class="left text01_div">
                        <p></p>
                        <p class="org"></p>
                    </div>
                </div>
            </div>

        </div>

        <!--统计分析图-->
        <div class="div_any">
            <div class="left div_any01">
                <div class="div_any_child">
                    <div class="div_any_title"><img src="img/title_1.png">男女比列统计 </div>
                    <p id="char1" class="p_chart"></p>
                </div>
                <div class="div_any_child">
                    <div class="div_any_title"><img src="img/title_2.png">广东省生产总值统计 </div>
                    <p id="char2" class="p_chart"></p>
                </div>
            </div>
            <div class="div_any02 left ">
                <div class="div_any_child div_height">
                    <div class="div_any_title any_title_width"><img src="img/title_3.png">各市人口数量</div>
                    <div id="map_div"></div>
                </div>
            </div>
            <div class="right div_any01">
                <div class="div_any_child">
                    <div class="div_any_title"><img src="img/title_4.png">AQI达标率前五城市</div>
                    <p id="char3" class="p_chart"></p>
                </div>
                <div class="div_any_child">
                    <div class="div_any_title"><img src="img/title_5.png">全体居民人均消费支出</div>
                    <p id="char4" class="p_chart"></p>
                </div>
            </div>
        </div>

        <!--分析表格-->
        <div class="div_table">
            <div class="left div_table_box">
                <div class="div_any_child">
                    <div class="div_any_title"><img src="img/title_4.png">广东省年末常住人口数 </div>
                    <div class="table_p">
                        <div id="char5" style="height: 90%;width: 95%;"></div>
                    </div>

                </div>
            </div>
            <div class="right div_table_box">
                <div class="div_any_child">
                    <div class="div_any_title"><img src="img/title_4.png">平均房价</div>
                    <div class="table_p">
                        <div id="char6" style="height: 90%;width: 95%;"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>

</html>